<template>
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      <i class="el-icon-user"></i><i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>
        <router-link to="/test">{{this.$store.state.username}}</router-link>
      </el-dropdown-item>
      <el-dropdown-item>
        <el-button type="text"
                   @click="open">
          退出登录
        </el-button>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'TopDrop',
  methods: {
    handleName (name) {
      this.$store.dispatch('changUsername', name)
    },
    open () {
      var _this = this
      this.$confirm('确定注销并退出系统吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '注销成功!'
        })
        localStorage.removeItem('admin')
        setTimeout(function () {
          _this.$router.push({ name: 'login' })
        }, 2000)
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/styles/varibles.styl';

.el-dropdown-link {
  cursor: pointer;
  color: $fontColor;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
